<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- title -->
      <!-- <title-manage @onsuccess='onload' :formlist='formlist' @onSearchUpdate='onSearchUpdate'/> -->
      <title-manage @onsuccess='onload' :total='counts'  :formlist='formlist' @onclaer='onclaer'/>

      <!-- 表格 -->
      <el-table :data="usersData" style="width: 100%">
        <el-table-column prop="date" label="序号" type="index" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="permission_group_title" label="权限组名称">
        </el-table-column>
        <el-table-column prop="role" label="角色"> </el-table-column>

        <el-table-column prop="操纵" label="操纵">
         <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(row)"></el-button>
           <el-button v-if="row.id!==2" prop='id' type="danger" icon="el-icon-delete" circle @click="delbtn(row)"></el-button>
         </template>
           </el-table-column>
      </el-table>

      <!-- 分页 -->
      <page-nation :total="counts" :formlist="formlist"  @on-success='onload'/>

      <!-- 修改弹框 -->
      <user-add
      text="修改用户"
      v-if="dialogFormVisible"
      v-model="dialogFormVisible"
      :parentformBase='parentformBase'
      @onsuccess='onload'
      />
    </el-card>
  </div>
</template>

<script>
import titleManage from '../components/title-manage.vue'
import { list, remove } from '@/api/base/users.js'
import PageNation from '../components/PageNation.vue'
import UserAdd from '../components/user-add.vue'
export default {
  components: { titleManage, PageNation, UserAdd },

  data () {
    return {
      usersData: [],
      //
      formlist: {
        page: 1,
        pagesize: 10, // 页尺寸
        username: ''
      },
      counts: 1, // 共几页
      dialogFormVisible: false,
      parentformBase: {}
    }
  },

  created () {
    this.onload(this.formlist)
  },

  methods: {
    // 获取用户初始化列表
    async onload (data) {
      const res = await list(data)

      this.usersData = res.data.list
      // console.log(this.usersData)
      this.counts = res.data.counts
    },
    // 用户添加
    handleEdit (row) {
      this.dialogFormVisible = true
      this.parentformBase = { ...row }
    },
    // 删除
    delbtn (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.onload()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // try {
      //   await remove(row)
      //   // this.$Message.success('闪出去成功')
      //   this.onload()
      // } catch (err) {
      //   console.log(err)
      // }
    },
    // onSearchUpdate (e) {
    //   console.log(e)
    //   this.usersData = e.list
    //   this.counts = e.counts
    // },
    onclaer (e) {
      this.onload(e)
    }
  }
}
</script>

<style scoped lang="less"></style>
